<template>
  <div>
    <a-upload-dragger
      name="file"
      :accept="accept"
      :multiple="true"
      :data="param"
      :action="API_URL+'/zg-system/file/upload'"
      @change="handleChange"
      :headers="headers"
      :showUploadList="false"
      :beforeUpload="handleBeforeUpload"
    >
      <div class="pd20">
        <p class="ant-upload-drag-icon">
          <a-icon type="inbox" />
        </p>
        <p class="ant-upload-text" style="">点击或者拖拽文件到该区域进行上传</p>
        <p class="ant-upload-hint" style="color:red;">
          文件类型包括{{ accept }}；单个文件大小不能超过{{ size }}MB
        </p>
      </div>
    </a-upload-dragger>
    <div class="mt10 mb10 tac" style="font-size:20px;color:#4dc0f5" v-show="uploadMsg.length>0">{{ uploadMsg }}</div>
    <viewer :images="images">
      <table v-show="showList" class="table-upload mt10">
        <tr v-for="(t,i) in list" :key="`attach_${i}`">
          <td>
            <div class="flx-s">
              <ZgImgHolder v-if="isImage(t.name)" :width="24" :height="24" :src="t.path"/>
              <ZgImgHolder v-else :width="24" :height="24" :isBack="false" :src="getFileIcon(t.name)"/>
              <span class="ml30">{{ t.name }}</span>
            </div>
          </td>
          <td style="text-align:right">{{ getFileSize(t.size) }}</td>
          <td class="w40" style="text-align:right">
            <a-icon class="del-btn" type="close" @click="del(t)"/>
          </td>
        </tr>
      </table>
    </viewer>
  </div>
</template>

<script>
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getFileIcon, getFileSize, isImage } from '@/core/file.js'
export default {
  model: {
    prop: 'modelVal', // 指向props的参数名
    event: 'change'// 事件名称
  },
  props: {
    modelVal: {
      type: Array,
      default: () => { return [] }
    },
    accept: {
      type: String,
      default: '.png,.jpg,.jpeg,.gif'
    },
    size: {
      type: Number,
      default: 10
    },
    limit: {
      type: Boolean,
      default: false
    },
    showList: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      uploadMsg: '',
      errorNum: 0,
      headers: {},
      param: {
        module: 'default'
      },
      list: this.modelVal
    }
  },
  computed: {
    images () {
      return this.list.filter(t => {
        return t.isImage
      }).map(t => {
        return this.API_URL + t.path
      })
    }
  },
  mounted () {
    this.headers[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN)
  },
  watch: {
    modelVal (newVal) {
      this.list = newVal
    },
    list (newVal) {
      this.$emit('change', newVal)
    }
  },
  methods: {
    isImage,
    getFileIcon,
    getFileSize,
    getFileIds () {
      const ids = []
      this.list.forEach(t => {
        ids.push(t.id)
      })
      return ids
    },
    handleBeforeUpload (file) {
      if (this.limit) {
        this.$warning({ title: '超过数量限制' })
        return false
      }
      return file.size / 1024 / 1024 < this.size
    },
    handleChange (info) {
      let percent = 0
      if (info.event) {
        percent = info.event.percent
      }
      const status = info.file.status
      const f = {
        uid: info.file.uid,
        name: info.file.name,
        size: info.file.size,
        sizeStr: getFileSize(info.file.size),
        icon: getFileIcon(info.file.name),
        isImage: isImage(info.file.name),
        percent: 0,
        path: '',
        msg: ''
      }
      if (status === 'uploading') {
        this.uploadMsg = `${info.file.name} 正在上传，当前进度${parseInt(percent)}%`
      } else if (status === 'done') {
        this.uploadMsg = ''
        const res = info.file.response
        if (res.code !== 1) {
          this.$message.error(res.msg)
        } else {
          const json = res.data
          const resultFile = Object.assign(f, {
            path: json.path
          })
          this.$emit('upload', resultFile)
          this.list.push(resultFile)
        }
      } else if (status === 'error') {
        this.uploadMsg = ''
        this.$message.error(`${info.file.name} 文件上传失败.`)
      }
    },
    del (t) {
      const that = this
      that.$http.post('/zg-system/file/remove', { path: t.path }, () => {
        const resultList = that.list.filter(el => {
          return el.path !== t.path
        })
        that.list = resultList
        that.$emit('del', t)
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .table-upload{
    width:100%;
    tr{
      .del-btn{
        display:none;
      }
      &:hover{
        background:#f2f2f2;
        .del-btn{
          display:block;
          &:hover{
            color:red
          }
        }
      }
    }
  }
</style>
